HTML 是 Hypertext Markup Language 的縮寫，也就是「超文本標記語言」
(是標記語言，不是程式語言)。
網頁即是 HTML 文件
所有的網頁都是HTML文件，網頁內容都必須透過HTML標記來定義。任何一個副檔名為.html 的檔案，都可以用文字編輯器如Sublime打開編輯，或用瀏覽器點開看網頁的實際樣子。
打開 VS code，在程式編輯視窗中輸入驚嘆號+tab將會出現以下程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
大概簡單解釋一下這段 HTML 所想表達的意義。
第一行是一個「宣告」： 告訴瀏覽器這份文件是一個 HTML5 的網頁，瀏覽器才能知道該如何正確的展示我的網頁。而瀏覽器是一行一行去讀取文件的，所以要注意的是，宣告必須寫在第一行ㄛ!
<html></html>
用他來包住整個網頁，表示這是一份HTML文件。被包圍的內容，我們稱為網頁「元素」(element)。一份完整的HTML文件，必然會在html裡包含head和body兩個網頁元素。
<head></head>
他所包住的資訊稱為「標頭」，裡面宣告各種網頁資訊，這些資訊並不會顯示給使用者看，因為它們的溝通對象是瀏覽器與其他的網路服務，如 Google 搜索引擎、Facebook 等。宣告的資訊包括網頁標題、外部連結、網頁樣式JavaScript腳本、meta tag等。
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
在head標籤內，表示要適應各種網路瀏覽器的編碼問題，如：IE瀏覽器預設文字編碼是BIG-5，這邊先宣告統一使用utf-8編碼，解決使用不同瀏覽器會看到亂碼的問題。
<title></title>
在此標籤內可以寫想取的的標題
<body></body>
他所包住的內容是會直接顯示給使用者看的，也是網頁核心。需要 CSS 來定義樣式的內容，也都會放在 body 裡面。例如我在body裡面輸入範例01
<body><h1>範例01</h1></body>
將會在網頁顯示
除了 img 標籤外，header、nav、main 和 section 是語義元素 (semantic element)，也就是「有意義的元素」，能讓搜尋引擎辨識出正確的網頁內容。
下篇將會仔細講解各項，謝謝大家的閱讀~
iThome鐵人賽
看影片追技術